<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title>Staff management page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="CSS/bootstrap.css" rel="stylesheet">
        <link href="CSS/bootstrap-responsive.css" rel="stylesheet">
        <script src="JS/jquery.js"></script>
        <script src="JS/bootstrap.js"></script>
        <script src="JS/javascriptuser.js"></script>        
        <script>
            var jsonGotClients;
            var jsonGotAgreements;            
            function loadInnerContent() {
                $("#headerofpage").load("headerofpageus.html", function(){
                    $("#homemenu").addClass("active");
                    $.ajax({
                        url: 'CheckUserLoggedInServlet',
                        success : function(text){
                            responsestate = text.substring(0,7);
                            response = text.substring(7);
                            if (responsestate == "success") {
                                document.getElementById("appendedInput").value = "Logged as: " + response;
                            } else {
                                $(location).attr("href","index.jsp");
                            }
                        }
                    });
                });
            }
            function leftHomeMenuPressed() {
                $("#contentPlace").load("elementsus.html #homeText", function() {
                });
                removeAllMenuClasses();
                $("#leftHomeMenuIcon").addClass("icon-ok");
            }
            function leftHelpMenuPressed() {
                $("#contentPlace").load("elementsus.html #helpText");
                removeAllMenuClasses();
                $("#leftHelpMenuIcon").addClass("icon-ok");
            }
            function leftMyInfoMenuPressed() {
                $("#contentPlace").load("elementsus.html #myInfoClient", function() {
                    updateMyInfoTable();
                });
                removeAllMenuClasses();
                $("#leftMyInfoMenuIcon").addClass("icon-ok");
            }
            function removeAllMenuClasses() {
            $("#leftHomeMenuIcon").removeClass("icon-ok");
            $("#leftViewClientsMenuIcon").removeClass("icon-ok");
            $("#leftAddClientsMenuIcon").removeClass("icon-ok");
            $("#leftRemoveClientsMenuIcon").removeClass("icon-ok");            
            $("#leftViewAgreementsMenuIcon").removeClass("icon-ok");
            $("#leftAddAgreementsMenuIcon").removeClass("icon-ok");
            $("#leftRemoveAgreementsMenuIcon").removeClass("icon-ok");
            $("#leftAttachPaymentsMenuIcon").removeClass("icon-ok");            
            $("#leftMyInfoMenuIcon").removeClass("icon-ok");
            $("#leftHelpMenuIcon").removeClass("icon-ok");
            $("#leftShowBanksMenuIcon").removeClass("icon-ok");
            }
            function searchClientKeyPressed() {
                var jsonGotClientsSearch = JSON.parse(JSON.stringify(jsonGotClients));
                document.getElementById("clientsUserAllTBody").removeAttribute("class");
                $("#expandClientButton").html("...");
                $("#expandClientButton").attr("disabled","disabled");
                searchClientFormOut(jsonGotClientsSearch);
            }        
            function leftViewClientsMenuPressed() {
                removeAllMenuClasses();
                $("#leftViewClientsMenuIcon").addClass("icon-ok");
                $.ajax( {
                    url: "GetUserClientsServlet",
                    error: function() {$(location).attr("href","index.jsp");  },
                    success: function(text) {
                        var response = text;
                        if (response == "failure") $(location).attr("href","index.jsp");
                        if (response == "nodata") document.getElementById("contentPlace").innerHTML = "<div class=\"alert\"><h3><strong>Sorry!</strong></h3>    <h5>You don't have any clients.</h5></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​"
                        if (response != "failure" && response != "nodata") {
                        jsonGotClients = JSON.parse(response);
                        makeClientsFormElement(jsonGotClients);
                        }
                   }
                });
            }
            function leftAddClientsMenuPressed() {
                $("#contentPlace").load("elementsus.html #addClient");
                removeAllMenuClasses();
                $("#leftAddClientsMenuIcon").addClass("icon-ok");
            }
            function leftRemoveClientsMenuPressed() {
                removeAllMenuClasses();
                $("#leftRemoveClientsMenuIcon").addClass("icon-ok");
                $.ajax( {
                    url: "GetUserClientsServlet",
                    error: function() {$(location).attr("href","index.jsp");  },
                    success: function(text) {
                        var response = text;
                        if (response == "failure") $(location).attr("href","index.jsp");
                        if (response == "nodata") document.getElementById("contentPlace").innerHTML = "<div class=\"alert\"><h3><strong>Sorry!</strong></h3>    <h5>You don't have any clients.</h5></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​"
                        if (response != "failure" && response != "nodata") {
                        jsonGotClients = JSON.parse(response);
                        makeRemoveClientsFormElement(jsonGotClients);
                        }
                   }
                });
            }
            function leftViewAgreementsMenuPressed() {
                removeAllMenuClasses();
                $("#leftViewAgreementsMenuIcon").addClass("icon-ok");
                $.ajax( {
                    url: "GetUserAgreementsServlet",
                    error: function() {$(location).attr("href","index.jsp");  },
                    success: function(text) {
                        var response = text;
                        if (response == "failure") $(location).attr("href","index.jsp");
                        if (response == "nodata") document.getElementById("contentPlace").innerHTML = "<div class=\"alert\"><h3><strong>Sorry!</strong></h3>    <h5>You don't have any agreements.</h5></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​"
                        if (response != "failure" && response != "nodata") {
                        jsonGotAgreements = JSON.parse(response);
                        makeAgreementsFormElement(jsonGotAgreements);
                        }
                   }
                });
            }
            function searchAgreementKeyPressed() {
                var jsonGotAgreementsSearch = JSON.parse(JSON.stringify(jsonGotAgreements));
                document.getElementById("agreementsUserAllTBody").removeAttribute("class");
                $("#expandClientButton").html("...");
                $("#expandClientButton").attr("disabled","disabled");
                searchAgreementFormOut(jsonGotAgreementsSearch);
            }          
            function leftAddAgreementsMenuPressed() {
                $("#contentPlace").load("elementsus.html #addAgreement");
                removeAllMenuClasses();
                $("#leftAddAgreementsMenuIcon").addClass("icon-ok");
            }
            function leftRemoveAgreementsMenuPressed() {
                removeAllMenuClasses();
                $("#leftRemoveAgreementsMenuIcon").addClass("icon-ok");
                $.ajax( {
                    url: "GetUserAgreementsServlet",
                    error: function() {$(location).attr("href","index.jsp");  },
                    success: function(text) {
                        var response = text;
                        if (response == "failure") $(location).attr("href","index.jsp");
                        if (response == "nodata") document.getElementById("contentPlace").innerHTML = "<div class=\"alert\"><h3><strong>Sorry!</strong></h3>    <h5>You don't have any agreements.</h5></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​"
                        if (response != "failure" && response != "nodata") {
                        jsonGotAgreements = JSON.parse(response);
                        removeAgreementsFormElement(jsonGotAgreements);
                        }
                   }
                });
            }
            var jsonGotPayments;
            function leftAttachPaymentsMenuPressed() {
                $("#contentPlace").html("<h3> Wait. Lengthy operation in progress!</h3>");
                removeAllMenuClasses();
                $("#leftAttachPaymentsMenuIcon").addClass("icon-ok");
                $.ajax( {
                    url: "GetUserPaymentsServlet",
                    error: function() {$(location).attr("href","index.jsp");  },
                    success: function(text) {
                        var response = text;
                        if (response == "failure") $(location).attr("href","index.jsp");
                        if (response == "nodata") document.getElementById("contentPlace").innerHTML = "<div class=\"alert\"><h3><strong>Sorry!</strong></h3>    <h5>There is no your clients payments.</h5></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​"
                        if (response != "failure" && response != "nodata") {
                        jsonGotPayments = JSON.parse(response);
                        makePaymentsFormElement(jsonGotPayments);
                        }
                   }
                });
            }
            function leftShowBanksMenuPressed() {
                $("#contentPlace").html("<h3> Wait. Lengthy operation in progress!</h3>");
                removeAllMenuClasses();
                $("#leftShowBanksMenuIcon").addClass("icon-ok");
                $.ajax( {
                    url: "GetUserBanksServlet",
                    error: function() {$(location).attr("href","index.jsp");  },
                    success: function(text) {
                        var response = text;
                        if (response == "failure") $(location).attr("href","index.jsp");
                        if (response == "nodata") document.getElementById("contentPlace").innerHTML = "<div class=\"alert\"><h3><strong>Sorry!</strong></h3>    <h5>There is no banks and accounts.</h5></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​"
                        if (response != "failure" && response != "nodata") {
                        var jsonGotBanks = JSON.parse(response);
                        fillBanksInfo(jsonGotBanks);
                        }
                   }
                });
            }
        </script>

    </head>
    <body onload="loadInnerContent(), leftHomeMenuPressed()">
        <div id="headerofpage">
        </div>

        <div class="row-fluid">
            <div class="span2" id="leftColumn">
                <ul class="nav nav-list">
                    <li onclick="leftHomeMenuPressed(); return false;" id="leftHomeMenu"><a href=""><i class="icon-home"></i> Home <i id="leftHomeMenuIcon" class=""></i></a></li>
                    <li class="nav-header" data-toggle="collapse" data-target="#clientsMenuCollapse">MY CLIENTS <i class="icon-download"></i></li>
                    <div id="clientsMenuCollapse" class="collapse">
                        <li onclick="leftViewClientsMenuPressed()" id="leftViewClientsMenu"><a href="contentus.html#">View Clients <i id="leftViewClientsMenuIcon" class=""></i></a></li>
                        <li onclick="leftAddClientsMenuPressed()" id="leftAddClientsMenu"><a href="contentus.html#">Add Client <i id="leftAddClientsMenuIcon" class=""></i></a></li>
                        <li onclick="leftRemoveClientsMenuPressed()" id="leftRemoveClientsMenu"><a href="contentus.html#">Remove Client <i id="leftRemoveClientsMenuIcon" class=""></i></a></li>                    
                    </div>
                    <li class="nav-header" data-toggle="collapse" data-target="#agreementsMenuCollapse">AGREEMENTS <i class="icon-download"></i></li>
                    <div id="agreementsMenuCollapse" class="collapse">
                        <li onclick="leftViewAgreementsMenuPressed()" id="leftViewAgreementsMenu"><a href="contentus.html#">View Agreements <i id="leftViewAgreementsMenuIcon" class=""></i></a></li>
                        <li onclick="leftAddAgreementsMenuPressed()" id="leftAddAgreementsMenu"><a href="contentus.html#">Add Agreement <i id="leftAddAgreementsMenuIcon" class=""></i></a></li>
                        <li onclick="leftRemoveAgreementsMenuPressed()" id="leftRemoveAgreementsMenu"><a href="contentus.html#">Remove Agreement <i id="leftRemoveAgreementsMenuIcon" class=""></i></a></li>
                    </div>
                    <li class="nav-header" data-toggle="collapse" data-target="#paymentsMenuCollapse">PAYMENTS <i class="icon-download"></i></li>
                    <div id="paymentsMenuCollapse" class="collapse">
                        <li onclick="leftAttachPaymentsMenuPressed()" id="leftAttachPaymentsMenu"><a href="contentus.html#">Attach/Detach payments <i id="leftAttachPaymentsMenuIcon" class=""></i></a></li>
                    </div>
                    <li class="nav-header" data-toggle="collapse" data-target="#bankMenuCollapse">BANK <i class="icon-download"></i></li>
                    <div id="bankMenuCollapse" class="collapse">
                        <li onclick="leftShowBanksMenuPressed()" id="leftShowBanksMenu"><a href="contentus.html#">Banks and accounts info <i id="leftShowBanksMenuIcon" class=""></i></a></li>
                    </div>
                    <li class="nav-header" data-toggle="collapse" data-target="#myInfoMenuCollapse">PERSONAL INFO <i class="icon-download"></i></li>
                    <div id="myInfoMenuCollapse" class="collapse" >
                        <li onclick="leftMyInfoMenuPressed(); return false;" id="leftMyInfoMenu"><a href="">My info <i id="leftMyInfoMenuIcon" class=""></i></a></li>
                        <li onclick="leftHelpMenuPressed(); return false;" id="leftHelpMenu"><a href="">Help <i id="leftHelpMenuIcon" class=""></i></a></li>
                    </div>
                </ul>
            </div>
            <div class="span10" id="centerColumn">
                <div id="contentPlace">
                    <div id="outputBodyPlace"></div>
                </div>

            </div>
        </div>
    </body>
</html>